<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>文件上传</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
	<body>

		<div class="layui-layout layui-layout-admin" style="margin-left: 30px;">
			<!-- <div class="layui-body"> -->
			<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
				<legend>文件上传</legend>
			</fieldset>
			<div class="layui-upload">
				<form class="layui-form">
					<div class="layui-form-item">
						<div class="layui-inline">
							<div class="layui-input-inline">
								<button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
							</div>
							<label class="layui-form-label">sftp服务器</label>
							<div class="layui-input-inline">
								<select id="sftp" lay-filter="sftp">
								</select>
							</div>
						</div>
					</div>
				</form>
				<div class="layui-upload-list" style="max-width: 1000px;">
					<table class="layui-table">
						<colgroup>
							<col>
							<col width="150">
							<col width="260">
							<col width="150">
						</colgroup>
						<thead>
							<tr>
								<th>文件名</th>
								<th>大小</th>
								<th>上传进度</th>
								<th>操作</th>
							</tr>
						</thead>
						<tbody id="demoList"></tbody>
					</table>
				</div>
				<button type="button" class="layui-btn" id="testListAction">开始上传</button>
			</div>
			<!-- </div> -->
		</div>

		<script src="layui/layui.js" charset="utf-8"></script>

		<script>
			layui.config({
				base: 'js/', //静态资源所在路径
			}).extend({
				index: 'http', //主入口模块
			}).use(['upload', 'element', 'layer', 'form', 'http'], function() {
				var $ = layui.jquery,
					upload = layui.upload,
					element = layui.element,
					layer = layui.layer,
					form = layui.form,
					api = layui.http.api;


				$.ajax({
					type: 'POST',
					url: api + 'sftp/getAll',
					dataType: 'json',
					success: function(result) {
						if (result.code == 0) {
							var length = result.data.length;
							if (length > 0) {
								var list = result.data;
								let option = '';
								for (var i = 0; i < list.length; i++) {
									var sftp = list[i];
									option = option.concat('<option value="' + sftp['id'] + '">' + sftp[
											'host'] + '-->' + sftp['userName'] +
										'</option>')
								}
								$('#sftp').append(option);
								form.render();
							};
						} else {
							layer.msg('加载sftp服务器列表失败', {
								icon: 5
							});
						}
					},
					error: function(result) {
						layer.msg('网络异常,加载sftp服务器列表失败,稍后重试', {
							icon: 5
						});
					}
				});


				//演示多文件列表
				var uploadListIns = upload.render({
					elem: '#testList',
					elemList: $('#demoList'),
					url: api + 'uploadFile',
					accept: 'file',
					multiple: true,
					number: 3,
					auto: false,
					bindAction: '#testListAction',
					data: {
						sftpId: function() {
							return $('#sftp').val();
						}
					},
					choose: function(obj) {
						var that = this;
						var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
						//读取本地文件
						obj.preview(function(index, file, result) {
							var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name +
								'</td>', '<td>' + (file.size / 1024).toFixed(1) + 'kb</td>',
								'<td><div class="layui-progress" lay-filter="progress-demo-' +
								index +
								'"><div class="layui-progress-bar" lay-percent=""></div></div></td>',
								'<td>',
								'<button class="layui-btn layui-btn-xs demo-reload">重传</button>',
								'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
								'</td>', '</tr>'
							].join(''));

							//单个重传
							tr.find('.demo-reload').on('click', function() {
								obj.upload(index, file);
							});

							//删除
							tr.find('.demo-delete').on('click', function() {
								delete files[index]; //删除对应的文件
								tr.remove();
								uploadListIns.config.elem.next()[0].value =
								''; //清空 input file 值，以免删除后出现同名文件不可选
							});

							that.elemList.append(tr);
							element.render('progress'); //渲染新加的进度条组件
						});
					},
					done: function(res, index, upload) { //成功的回调
						var that = this;
						if (res.code == 0) { //上传成功
							layer.msg('上传成功' + res.data);
							return;
						}
						this.error(index, upload);
					},
					allDone: function(obj) { //多文件上传完毕后的状态回调
						console.log(obj)
					},
					error: function(index, upload) { //错误回调
						var that = this;
						var tr = that.elemList.find('tr#upload-' + index),
							tds = tr.children();
					},
					progress: function(n, elem, e, index) {
						element.progress('progress-demo-' + index, n + '%'); //执行进度条。n 即为返回的进度百分比
					}
				});


			});
		</script>

	</body>
</html>
